<template>
  <div class="basic-container">
    <div class="main-head">
      <div
        class="head-item"
        :class="{'headActive': activeMenu.nm === item.nm}"
        v-for="(item, ind) in menuList"
        :key="ind"
        @click="clickMenu(item)"
      >
        <div></div>
        <div>{{item.mc}}</div>
      </div>
    </div>
    <div class="main-body">
      <!-- 部队级别 -->
      <div v-show="activeMenu.nm === '1'" class="icon-items">
        <div
          v-for="(item, index) in zzjgIcons"
          :key="'ic-' + index"
          class="attribute-item"
          :title="item.name"
        >
          <div class="attribute-name" :title="item.name">{{ item.name }}</div>
          <div class="attribute-img">
            <el-image :src="item.icon ? require(`@/assets/image/bdjg/${item.icon}.png`) : null"></el-image>
          </div>
        </div>
      </div>
      <!-- 人员岗位 -->
      <div v-show="activeMenu.nm === '2'" class="icon-items">
        <div
          v-for="(item, index) in personnelList"
          :key="'ic-' + index"
          class="attribute-item"
          :title="item.name"
        >
          <div class="attribute-name" :title="item.name">{{ item.name }}</div>
          <div class="attribute-img">
            <el-image :src="item.icon ? require(`@/assets/image/${item.icon}.png`) : null" style="width: 42px;height: 107px;"></el-image>
          </div>
        </div>
      </div>
      <!-- 装备类别 -->
      <div v-show="activeMenu.nm === '3'" class="icon-items">
        <div
          v-for="(item, index) in equipmentList"
          :key="'ic-' + index"
          class="attribute-item"
          :title="item.name"
        >
          <div class="attribute-name" :title="item.name">{{ item.name }}</div>
          <div class="attribute-img">
            <el-image :src="item.icon ? require(`@/assets/image/wqzb/${item.icon}.png`) : null"></el-image>
          </div>
        </div>
      </div>
      <!-- 配套设施 -->
      <div v-show="activeMenu.nm === '4'" class="icon-items">
        <div
          v-for="(item, index) in facilityList"
          :key="'ic-' + index"
          class="attribute-item"
          :title="item.name"
        >
          <div class="attribute-name" :title="item.name">{{ item.name }}</div>
          <div class="attribute-img">
            <!-- <el-image :src="item.icon ? require(`@/assets/image/ptss/${item.icon}.png`) : null"></el-image> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'basicContent',
  data(){
    return {
      menuList: [
        { nm: "1", mc: "部队级别", tablename: "", modelId: "080903b57ad6419290b67ff072906edd", },
        { nm: "2", mc: "人员岗位", tablename: "", modelId: "080903b57ad6419290b67ff072906edd", },
        { nm: "3", mc: "装备类型", tablename: "", modelId: "8cb4e33f12844b21b177851c4864fbb2", },
        { nm: "4", mc: "设施类别", tablename: "", modelId: "957df8bb72fa44428db82495d574648c", },
      ],
      activeMenu:{},
      zzjgIcons: [
        {id:'1', name: '军', icon: '', level: 1 },
        {id:'2', name: '旅', icon: '', level: 2 },
        {id:'3', name: '营', icon: '营', level: 3 },
        {id:'4', name: '连', icon: '连', level: 4 },
        {id:'5', name: '排', icon: '排', level: 5 },
        {id:'6', name: '班', icon: '班', level: 6 },
      ],
      personnelList: [
        { name: '营长', icon: '25' },
        { name: '副营长', icon: '25' },
        { name: '连长', icon: '25' },
        { name: '副连长', icon: '25' },
        { name: '排长', icon: '25'},
        { name: '班长', icon: '25' },
        { name: '炮手', icon: '25' },
        { name: '士兵', icon: '25' },
        { name: '参谋', icon: '25' },
      ],
      equipmentList: [
        { name: '05式指挥车', icon: '指挥车'},
        { name: '05式步战车', icon: '步战车'},
        { name: '05式突击车', icon: '突击车'},
        { name: '05式抢修车', icon: '抢修车'},
        { name: '120迫榴车', icon: '迫榴车'},
      ],
      facilityList:[]
    }
  },
  created() {
    this.getDicList()
  },
  methods:{
    getDicList(){
      this.activeMenu = this.menuList[0];
    },
    clickMenu(obj){
      this.activeMenu = {...obj};
    }
  }
}
</script>

<style scoped lang="scss">
.basic-container{
  height: calc(100% - 20px);
  margin: 10px;
  padding: 10px;
  background: url("../../assets/image/z14.png") no-repeat;
  background-size: 100% 100%;

  .main-head{
    height: 63px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 100px;
    position: relative;
    background: url("../../assets/image/basic-h.png") no-repeat;
    background-size: 100% 100%;

    .head-item{
      width: 235px;
      height: 78px;
      line-height: 78px;
      display: flex;
      justify-content: center;
      font-size: 18px;
      letter-spacing: 2px;
      font-weight: bold;
      color: #061c34;
      padding: 0 3em;
      cursor: pointer;
    }
    .headActive{
      color: #c9daf7;
      line-height: 62px;
      background: url("../../assets/image/z18.png") no-repeat;
      background-size: 100% 100%;
      margin-top: 16px;
    }
  }
  .main-body {
    height: calc(100% - 113px);
    border-radius: 3px;
    border:1px solid #071b56;
    padding: 30px;

    .icon-items{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 30px;
      padding: 5px;
    }
    .attribute-item {
      width: 180px;
      height: 180px;
      background: url("../../assets/image/z9.png") no-repeat;
      margin: 0 auto;
      transition: all 0.3s;

      &:hover {
        //background: #f5f7fa;
        //border-color: #409eff;
        //box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
      .attribute-name{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 1.4em;
        font-weight: bold;
        text-align: center;
      }
      .attribute-img{
        height: calc(100% - 50px);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
